import { Form, Input, message, Modal, Select, Table } from 'antd';
import style from '../css/PatientDetail.module.scss'
import { TableProps } from 'antd/lib';
import { useNavigate, useSearchParams } from 'react-router';
import { useEffect, useState } from 'react';
import { patientcard, patientid, patientlogoff } from '../utils/request';
import moment from 'moment';
function PatientDetail() {
    const [params] = useSearchParams()
    const navigate = useNavigate()
    const [fetchData, setFetchData] = useState({
        Medicalrecord: '',
        name: '',
        sex: '',
        IDtype: '',
        Idcard: '',
        birthDate: '',
        age: '',
        nationality: '',
        folk: '',
        maritalstatus: '',
        career: '',
        phone: '',
        eMail: '',
        status: '',
        address: '',
        nowDetail: '',
        nowzipcode: '',
        hukouaddress: '',
        nowhukouDetail: '',
        hukoucode: '',
        relotion: '',
        people: '',
        guardianshipphone: '',
        relotion1: '',
        people1: '',
        guardianshipphone1: "",
        relotion2: '',
        guardianshippeople2: '',
        phone2: '',
        Patientnature: '',
        Medicalinsurance: '',
        Filingtime: ''
    })
    useEffect(() => {
        patientid({
            id: params.get('id')
        }).then(res => {
            console.log(res.data[0])
            setFetchData(res.data[0])
        }).catch(err => {
            console.log(err)
        })
        patientcard({
            id: params.get('id')
        }).then(res => {
            console.log(res)
            setData(res.data)
        }).catch(err => {
            console.log(err)
        })
    }, [])
    // 卡历史的表格数据
    // 编辑中的卡管理表格数据
    interface DataType {
        key: string;
        cardtype: string;
        card: string;
        status: string;
        correlationtime: string;
        failuretime: string;
        cardnote: string
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '卡类型',
            dataIndex: 'cardtype',
            key: 'cardtype',
        },
        {
            title: '卡号',
            dataIndex: 'card',
            key: 'card',
        },
        {
            title: '卡状态',
            dataIndex: 'status',
            key: 'status',
            render: (text) => (
                text == '绑定中' ?
                    <a style={{ color: '#00A76F' }}>{text}</a>
                    :
                    text == '已失效' ?
                        <a style={{ color: '#aaa' }}>{text}</a>
                        :
                        <a style={{ color: 'rgba(255, 100, 100, 0.996078431372549)' }}>{text}</a>
            ),
        },
        {
            title: '关联时间',
            key: 'correlationtime',
            dataIndex: 'correlationtime',
            render: (text) => (
                <span>{moment(text).format("YYYY-MM-DD  HH:mm:ss")}</span>
            )
        },
        {
            title: '失效时间',
            dataIndex: 'failuretime',
            key: 'failuretime',
            render: (text) => (
                text?
                <span>{moment(text).format("YYYY-MM-DD  HH:mm:ss")}</span>
                :''
            )
        },
        {
            title: '卡备注',
            dataIndex: 'cardnote',
            key: 'cardnote',
        },
    ];


    const [data, setData] = useState<DataType[]>([])
    // 顶部按钮
    const edit = () => {
        console.log('编辑')
        navigate('/index/patientmangent/PatientRegistration?id='+params.get('id'))
    }
    const print = () => {
        console.log('打印')
    }
    const { TextArea } = Input;
    const [form] = Form.useForm();
    const logoff = () => {
        console.log('注销')
        // setIsModalOpen(true);
        if(fetchData.status=='已注销'){
            message.warning('该账户已注销，请重试')
        }else{
            Modal.confirm({
                title: '注销确认',
                content: (
                    <Form
                        form={form}
                        style={{
                            marginTop: 20
                        }}
                    >
                        <Form.Item className={style.itemstyle} rules={[{ required: true }]} label='注销原因' name='reson'>
                            <Select
                                style={{ width: 230, height: 32, borderRadius: 0 }}
                                placeholder='请选择'
                                options={[
                                    { value: '销户', label: '销户' },
                                    { value: '离院删档', label: '离院删档' },
                                    { value: '更换信息', label: '更换信息' },
                                    { value: '其他', label: '其他' },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item className={style.itemstyle} label='注销备注' name='note'>
                            <TextArea style={{ width: 230, height: 80, borderRadius: 0, resize: 'none' }} rows={4} />
                        </Form.Item>
                    </Form>
                ),
                onOk: handleOk,
                onCancel: handleCancel,
                okText: '确认',
                footer: (_, { OkBtn, CancelBtn }) => (
                    <>
                        <CancelBtn />
                        <OkBtn />
                    </>
                ),
            });
        }
        
    }
    const handleOk = () => {
        // console.log('确认')
        form.validateFields().then(values => {
            console.log('Validated values: ', values);
            patientlogoff({
                id: params.get('id'),
                ...values
            }).then(res => {
                console.log(res)
                navigate('/index/patientmangent/PatientLists')
                message.success('注销操作成功')
            }).catch(err => {
                console.log(err)
            })
        }).catch(info => {
            console.log('Validate Failed:', info);
        });
    };

    const handleCancel = () => {
        console.log('取消')
    };
    return (
        <>
            <div className={style.optionboxs}>
                {/* 编辑 */}
                <div className={style.iconimg} onClick={() => edit()}>
                    <div className={style.edit}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E8%AE%BE%E8%AE%A1%E7%BB%84%E4%BB%B6/u113.svg" alt="" />
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E8%AE%BE%E8%AE%A1%E7%BB%84%E4%BB%B6/u112.svg" alt="" />
                    </div>
                    <span>编辑</span>
                </div>
                <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2905.svg" alt="" />
                {/* 打印 */}
                <div className={style.iconimg} onClick={() => print()}>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E8%AE%BE%E8%AE%A1%E7%BB%84%E4%BB%B6/u117.svg" alt="" />
                    <span>打印</span>
                </div>
                <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2905.svg" alt="" />
                {/* 注销 */}
                <div className={style.iconimg} onClick={() => logoff()}>
                    <div className={style.logoff}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E8%AE%BE%E8%AE%A1%E7%BB%84%E4%BB%B6/u122.svg" alt="" />
                    </div>
                    <span>注销</span>
                </div>
            </div>
            <div className={style.infoboxs}>
                <div className={style.title}>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2811.svg" alt="" />
                    <span>基本信息</span>
                </div>
                <div className={style.tablebox}>
                    <table className={style.table}>
                        <tbody>
                            <tr>
                                <th>病历号</th>
                                <td>{fetchData.Medicalrecord}</td>
                                <th>姓名</th>
                                <td>{fetchData.name}</td>
                                <th>性别</th>
                                <td>{fetchData.sex}</td>
                            </tr>
                            <tr>
                                <th>证件类型</th>
                                <td>{fetchData.IDtype}</td>
                                <th>居民身份证号码</th>
                                <td>{fetchData.Idcard}</td>
                                <th>出生日期</th>
                                <td>{fetchData.birthDate ? moment(fetchData.birthDate).format("YYYY-MM-DD") : '--'}</td>
                            </tr>
                            <tr>
                                <th>年龄</th>
                                <td>{fetchData.age}岁</td>
                                <th>国籍</th>
                                <td>{fetchData.nationality ? fetchData.nationality : '--'}</td>
                                <th>民族</th>
                                <td>{fetchData.folk ? fetchData.folk : '--'}</td>
                            </tr>
                            <tr>
                                <th>婚姻状况</th>
                                <td>{fetchData.maritalstatus ? fetchData.maritalstatus : '--'}</td>
                                <th>职业</th>
                                <td>{fetchData.career ? fetchData.career : '--'}</td>
                                <th>联系电话</th>
                                <td>{fetchData.phone}</td>
                            </tr>
                            <tr>
                                <th>电子邮箱</th>
                                <td colSpan={3}>{fetchData.eMail ? fetchData.eMail : '--'}</td>
                                <th>状态</th>
                                <td style={{ display: 'flex', alignItems: 'center' }}>
                                    <div className={style.status}>
                                        <p className={style.bg}></p>
                                        <p className={style.circle}></p>
                                    </div>
                                    {fetchData.status}
                                </td>
                            </tr>
                            <tr>
                                <th>现住地址</th>
                                <td colSpan={3}>{fetchData.address.split(',')[0]}{fetchData.address.split(',')[1]}{fetchData.address.split(',')[2]}{fetchData.nowDetail}</td>
                                <th>邮编</th>
                                <td>{fetchData.nowzipcode ? fetchData.nowzipcode : '--'}</td>
                            </tr>
                            <tr>
                                <th>户口地址</th>
                                <td colSpan={3}>{fetchData.hukouaddress ? `${fetchData.hukouaddress.split(',')[0]}${fetchData.hukouaddress.split(',')[1]}${fetchData.hukouaddress.split(',')[2]}${fetchData.nowhukouDetail ? fetchData.nowhukouDetail : ''}` : '--'}</td>
                                <th>邮编</th>
                                <td>{fetchData.hukoucode ? fetchData.hukoucode : '--'}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                {/* 监护人信息 */}
                <div className={style.title}>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2846.svg" alt="" />
                    <span>监护人信息</span>
                </div>
                <div className={style.tablebox}>
                    <table className={style.table}>
                        <tbody>
                            <tr>
                                <th>监护人关系</th>
                                <td>{fetchData.relotion}</td>
                                <th>监护人</th>
                                <td>{fetchData.people}</td>
                                <th>监护人电话</th>
                                <td>{fetchData.guardianshipphone}</td>
                            </tr>
                            <tr>
                                <th>监护人关系</th>
                                <td>{fetchData.relotion1 ? fetchData.relotion1 : '--'}</td>
                                <th>监护人</th>
                                <td>{fetchData.people1 ? fetchData.people1 : '--'}</td>
                                <th>监护人电话</th>
                                <td>{fetchData.guardianshipphone1 ? fetchData.guardianshipphone1 : '--'}</td>
                            </tr>
                            <tr>
                                <th>监护人关系</th>
                                <td>{fetchData.relotion2 ? fetchData.relotion2 : '--'}</td>
                                <th>监护人</th>
                                <td>{fetchData.guardianshippeople2 ? fetchData.guardianshippeople2 : '--'}</td>
                                <th>监护人电话</th>
                                <td>{fetchData.phone2 ? fetchData.phone2 : '--'}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                {/* 关联信息 */}
                <div className={style.title}>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2868.svg" alt="" />
                    <span>关联信息</span>
                </div>
                <div className={style.tablebox}>
                    <table className={style.table}>
                        <tbody>
                            <tr>
                                <th>患者性质</th>
                                <td colSpan={2}>{fetchData.Patientnature}</td>
                                <th>医保卡号</th>
                                <td colSpan={2}>{fetchData.Medicalinsurance ? fetchData.Medicalinsurance : '--'}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                {/* 其他信息 */}
                <div className={style.title}>
                    <div className={style.other}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2962.svg" alt="" />
                    </div>
                    <span>其他信息</span>
                </div>
                <div className={style.tablebox}>
                    <table className={style.table}>
                        <tbody>
                            <tr>
                                <th>建档操作员</th>
                                <td colSpan={2}>李天</td>
                                <th>建档时间</th>
                                <td colSpan={2}>{moment(fetchData.Filingtime).format("YYYY-MM-DD  HH:mm:ss")}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                {/* 卡历史 */}
                <div className={style.title}>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2868.svg" alt="" />
                    <span>卡历史</span>
                </div>
                <div className={style.tablebox}>
                    <Table<DataType> columns={columns} pagination={false} dataSource={data} rowKey='patientCard_id' className={style.tabledata} />
                </div>
            </div>
        </>
    );
}

export default PatientDetail;